<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="../static/bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.min.css"
      type="text/css"/>
<script type="text/javascript" src="../static/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../static/bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript"
        src="../static/bootstrap-multiselect-master/bootstrap-multiselect-master/dist/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet"
      href="../static/bootstrap-multiselect-master/bootstrap-multiselect-master/dist/css/bootstrap-multiselect.css"
      type="text/css"/>
<body>
<h1>bootstrap-multiselect操作</h1>
<select id="example-getting-started" multiple="multiple"  style="width:95%;">
    <optgroup label="Group 1" class="group-1">
        <option value="1-1">Option 1.1</option>
        <option value="1-2" selected="selected">Option 1.2</option>
        <option value="1-3" selected="selected">Option 1.3</option>
    </optgroup>
    <optgroup label="Group 2" class="group-2">
        <option value="2-1">Option 2.1</option>
        <option value="2-2">Option 2.2</option>
        <option value="2-3">Option 2.3</option>
    </optgroup>
</select>
<script>
    $(document).ready(function () {
        $('#example-getting-started').multiselect({
            buttonWidth: '50%',
            enableClickableOptGroups: true,
            enableCollapsibleOptGroups: true,
            buttonContainer: '<div id="example-enableCollapsibleOptGroups-collapsed-container" />',
        });
    });
</script>
</body>
</html>